<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ZhuaBa - Video</title>

  <!-- begin::global styles -->
  <link rel="stylesheet" href="../static/assets/vendors/bundle.css" type="text/css">
  <!-- end::global styles -->

  <!-- begin::datepicker -->
  <link rel="stylesheet" href="../static/assets/vendors/datepicker/daterangepicker.css">
  <!-- begin::datepicker -->

  <!-- begin::vmap -->
  <link rel="stylesheet" href="../static/assets/vendors/vmap/jqvmap.min.css">
  <!-- begin::vmap -->
  <link rel="stylesheet" href="../static/assets/css/footer.css" type="text/css">
  <!--<link rel="stylesheet" href="../static/assets/css/header.css" type="text/css">-->
  <link rel="stylesheet" href="../static/assets/css/rankPage.min.css" type="text/css">
  <!-- begin::custom styles -->
  <link rel="stylesheet" href="../static/assets/css/app.css" type="text/css">
  <link rel="stylesheet" href="../static/assets/css/custom.css" type="text/css">
  <!-- end::custom styles -->
  <link rel="stylesheet" href="../static/assets/css/iconfont.css" type="text/css">
  <link rel="stylesheet" type="text/css" media="screen" href="../static/assets/css/player.css" />

  <script type="text/javascript">
    var days=new  Array ("日", "一", "二", "三", "四", "五", "六");
    function showDT() {
      var currentDT = new Date();
      var y,m,date,day,hs,ms,ss,theDateStr;
      y = currentDT.getFullYear(); //四位整数表示的年份
      m = currentDT.getMonth() + 1; //月
      date = currentDT.getDate(); //日
      day = currentDT.getDay(); //星期
      hs = currentDT.getHours(); //时
      ms = currentDT.getMinutes(); //分
      ss = currentDT.getSeconds(); //秒
      theDateStr = y+"年"+  m +"月"+date+"日 星期"+days[day]+" "+hs+":"+ms+":"+ss;
      document.getElementById("theClock"). innerHTML =theDateStr;
      // setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
      window.setTimeout( showDT, 1000);
    }
  </script>

</head>
<body onload="showDT()">

<!-- begin::page loader-->
<div class="page-loader">
  <div class="spinner-border"></div>
  <span>Loading ...</span>
</div>
<!-- end::page loader -->

<!-- begin::side menu -->
<div class="side-menu">
  <div class='side-menu-body'>
    <ul>
      <!-- 导航栏-->
      <li class="side-menu-divider">欢迎使用</li>
      <li class>
        <a href="/welcome.html"><i class="icon ti-home"></i> <span>历史上的今日</span> </a>
      </li>
      <li >
        <a href="/Music.html"><i class="icon ti-paint-bucket"></i> <span>今日热门歌曲</span> </a>
      </li>
      <li ><a href="/News.html"><i class="icon ti-rocket"></i> <span>今日热点新闻</span> </a>
      </li>
      <li class="open"><a href="/Video.html"><i class="icon ti-crown"></i> <span>今日热门视频</span> </a>
      </li>
      <li><a href="/History.html"><i class="icon ti-files"></i> <span>历史记录</span> </a>
      </li>
    </ul>
  </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
  <div class="container-fluid">

    <div class="header-logo">
      <a href="#">
        <img src="../static/assets/media/image/light-logo.png" alt="...">
        <span class="logo-text d-none d-lg-block">Zhuaba</span>
      </a>
    </div>

    <div class="header-body">
      <ul></ul>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
            <i class="fa fa-search"></i>
          </a>
        </li>

        <li class="nav-item dropdown">
          <a href="#" data-toggle="dropdown">
            <figure class="avatar avatar-sm avatar-state-success">
              <img class="rounded-circle" src="../static/assets/media/image/avatar.jpg" alt="...">
            </figure>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown-divider"></div>
            <a href="/" class="text-danger dropdown-item">登出</a>
            <a href="Person.html" class="text-danger dropdown-item">个人信息</a>
          </div>
        </li>
        <li class="nav-item d-lg-none d-sm-block">
          <a href="#" class="nav-link side-menu-open">
            <i class="ti-menu"></i>
          </a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

  <div class="container-fluid">
    <!-- begin::page header -->
    <div class="page-header d-md-flex justify-content-between align-items-center">
      <div>
        <h4>今日热门视频</h4>
        <h4 id="theClock"></h4>
      </div>
    </div>
    <!-- end::page header -->
  </div>
  <div id="myarea" >
    <table class="table table-bordered table-hover" id="list">
      <tr class="info">
        <td id="num">序号</td>
        <td id="title">标题</td>
        <td id="play">播放量</td>
        <td id="up">up主</td>
      </tr>
    </table>
  </div>
  <script th:inline="javascript">
    var str =[[${htmlCode2}]] ;
    str=JSON.parse(str);
    console.log(str);

      var t=document.getElementById("list"); //获取Table
      var length= t.rows.length; //获得Table下的行数
      if(length>1){//如果有行，则清空
        for(var i=length-1;i>=1;i--)
        {
          t.deleteRow(i);
        }
      }

      if(str.length>0){
        for (var i = 0; i < str.length; i++) {
          //tr
          if(i%4==0){

          }
          var r = t.insertRow(t.rows.length);//创建新的行
          // td
          var a = r.insertCell(); //创建新的列
          a.innerHTML = str[i].num;
          var b = r.insertCell(); //创建新的列
          b.innerHTML = str[i].title;
          var c = r.insertCell(); //创建新的列
          c.innerHTML = str[i].play;
          var d = r.insertCell(); //创建新的列
          d.innerHTML = str[i].up;
        }
      }else{
        var r = t.insertRow();
        var c = r.insertCell();
        c.innerHTML="暂无数据";
      }
      document.getElementById('list').appendChild(t);
    function history(data) {
      $.ajax({
        type:"post",
        url:"http://localhost:8080/"+"/Video/saveJsonHistory",
        dataType:'json',
        data:{
          "href": data.href,
          "time": new Date(),
          "locationhref":location.href,
        },//json
        success(data){

        }
      });
    }
  </script>
  <div style="text-align:center; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
    <p style="color: #0b0b0b">来源：<a href="https://www.bilibili.com/v/popular/rank/all" target="_blank">哔哩哔哩</a></p>
  </div>

</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="../static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::charts -->
<script src="../static/assets/vendors/charts/chartjs/chart.min.js"></script>
<script src="../static/assets/vendors/charts/peity/jquery.peity.min.js"></script>
<script src="../static/assets/js/examples/charts/chartjs.js"></script>
<script src="../static/assets/js/examples/charts/peity.js"></script>
<!-- end::charts -->

<!-- begin::daterangepicker -->
<script src="../static/assets/vendors/datepicker/daterangepicker.js"></script>
<!-- end::daterangepicker -->

<!-- begin::dashboard -->
<script src="../static/assets/js/examples/dashboard.js"></script>
<!-- end::dashboard -->

<!-- begin::vamp -->
<script src="../static/assets/vendors/vmap/jquery.vmap.min.js"></script>
<script src="../static/assets/vendors/vmap/maps/jquery.vmap.usa.js"></script>
<script src="../static/assets/js/examples/vmap.js"></script>
<!-- end::vamp -->

<!-- begin::custom scripts -->
<script src="../static/assets/js/custom.js"></script>
<script src="../static/assets/js/app.js"></script>
<!-- end::custom scripts -->
<style type ="text/css">
  .table{text-align: center;}
  html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  body {
    margin: 0;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }
  td,
  th {
    padding: 0;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
  table {
    background-color: transparent;
  }
  .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
  }
  .table > caption + thead > tr:first-child > th,
  .table > colgroup + thead > tr:first-child > th,
  .table > thead:first-child > tr:first-child > th,
  .table > caption + thead > tr:first-child > td,
  .table > colgroup + thead > tr:first-child > td,
  .table > thead:first-child > tr:first-child > td {
    border-top: 0;
  }
  .table > tbody + tbody {
    border-top: 2px solid #ddd;
  }
  .table .table {
    background-color: #fff;
  }
  .table-condensed > thead > tr > th,
  .table-condensed > tbody > tr > th,
  .table-condensed > tfoot > tr > th,
  .table-condensed > thead > tr > td,
  .table-condensed > tbody > tr > td,
  .table-condensed > tfoot > tr > td {
    padding: 5px;
  }
  .table-bordered {
    border: 1px solid #ddd;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td {
    border: 1px solid #ddd;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > thead > tr > td {
    border-bottom-width: 2px;
  }
  .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
  }
  .table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
  }
  table col[class*="col-"] {
    position: static;
    display: table-column;
    float: none;
  }
  table td[class*="col-"],
  table th[class*="col-"] {
    position: static;
    display: table-cell;
    float: none;
  }
  .table > thead > tr > td.active,
  .table > tbody > tr > td.active,
  .table > tfoot > tr > td.active,
  .table > thead > tr > th.active,
  .table > tbody > tr > th.active,
  .table > tfoot > tr > th.active,
  .table > thead > tr.active > td,
  .table > tbody > tr.active > td,
  .table > tfoot > tr.active > td,
  .table > thead > tr.active > th,
  .table > tbody > tr.active > th,
  .table > tfoot > tr.active > th {
    background-color: #f5f5f5;
  }
  .table-hover > tbody > tr > td.active:hover,
  .table-hover > tbody > tr > th.active:hover,
  .table-hover > tbody > tr.active:hover > td,
  .table-hover > tbody > tr:hover > .active,
  .table-hover > tbody > tr.active:hover > th {
    background-color: #e8e8e8;
  }
  .table > thead > tr > td.success,
  .table > tbody > tr > td.success,
  .table > tfoot > tr > td.success,
  .table > thead > tr > th.success,
  .table > tbody > tr > th.success,
  .table > tfoot > tr > th.success,
  .table > thead > tr.success > td,
  .table > tbody > tr.success > td,
  .table > tfoot > tr.success > td,
  .table > thead > tr.success > th,
  .table > tbody > tr.success > th,
  .table > tfoot > tr.success > th {
    background-color: #dff0d8;
  }
  .table-hover > tbody > tr > td.success:hover,
  .table-hover > tbody > tr > th.success:hover,
  .table-hover > tbody > tr.success:hover > td,
  .table-hover > tbody > tr:hover > .success,
  .table-hover > tbody > tr.success:hover > th {
    background-color: #d0e9c6;
  }
  .table > thead > tr > td.info,
  .table > tbody > tr > td.info,
  .table > tfoot > tr > td.info,
  .table > thead > tr > th.info,
  .table > tbody > tr > th.info,
  .table > tfoot > tr > th.info,
  .table > thead > tr.info > td,
  .table > tbody > tr.info > td,
  .table > tfoot > tr.info > td,
  .table > thead > tr.info > th,
  .table > tbody > tr.info > th,
  .table > tfoot > tr.info > th {
    background-color: #d9edf7;
  }
  .table-hover > tbody > tr > td.info:hover,
  .table-hover > tbody > tr > th.info:hover,
  .table-hover > tbody > tr.info:hover > td,
  .table-hover > tbody > tr:hover > .info,
  .table-hover > tbody > tr.info:hover > th {
    background-color: #c4e3f3;
  }
  .table > thead > tr > td.warning,
  .table > tbody > tr > td.warning,
  .table > tfoot > tr > td.warning,
  .table > thead > tr > th.warning,
  .table > tbody > tr > th.warning,
  .table > tfoot > tr > th.warning,
  .table > thead > tr.warning > td,
  .table > tbody > tr.warning > td,
  .table > tfoot > tr.warning > td,
  .table > thead > tr.warning > th,
  .table > tbody > tr.warning > th,
  .table > tfoot > tr.warning > th {
    background-color: #fcf8e3;
  }
  .table-hover > tbody > tr > td.warning:hover,
  .table-hover > tbody > tr > th.warning:hover,
  .table-hover > tbody > tr.warning:hover > td,
  .table-hover > tbody > tr:hover > .warning,
  .table-hover > tbody > tr.warning:hover > th {
    background-color: #faf2cc;
  }
  .table > thead > tr > td.danger,
  .table > tbody > tr > td.danger,
  .table > tfoot > tr > td.danger,
  .table > thead > tr > th.danger,
  .table > tbody > tr > th.danger,
  .table > tfoot > tr > th.danger,
  .table > thead > tr.danger > td,
  .table > tbody > tr.danger > td,
  .table > tfoot > tr.danger > td,
  .table > thead > tr.danger > th,
  .table > tbody > tr.danger > th,
  .table > tfoot > tr.danger > th {
    background-color: #f2dede;
  }
  .table-hover > tbody > tr > td.danger:hover,
  .table-hover > tbody > tr > th.danger:hover,
  .table-hover > tbody > tr.danger:hover > td,
  .table-hover > tbody > tr:hover > .danger,
  .table-hover > tbody > tr.danger:hover > th {
    background-color: #ebcccc;
  }
  .table-responsive {
    min-height: .01%;
    overflow-x: auto;
  }
  @media screen and (max-width: 767px) {
    .table-responsive {
      width: 100%;
      margin-bottom: 15px;
      overflow-y: hidden;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      border: 1px solid #ddd;
    }
    .table-responsive > .table {
      margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
      white-space: nowrap;
    }
    .table-responsive > .table-bordered {
      border: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:first-child,
    .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .table-responsive > .table-bordered > thead > tr > td:first-child,
    .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
      border-left: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:last-child,
    .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .table-responsive > .table-bordered > thead > tr > td:last-child,
    .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
      border-right: 0;
    }
    .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
    .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
      border-bottom: 0;
    }
  }
</style>
</body>
</html>